<template>
  <div>
    <div class="stopsContainer">
      <span class="icon top-left-icon"></span>
      <span class="icon top-right-icon"></span>
      <span class="icon bottom-left-icon"></span>
      <span class="icon bottom-right-icon"></span>

      <h1>top10客流量</h1>
      <p v-for="(stop, index) of stops" :key="index"><span>{{stop.rank}}</span><span>{{stop.name}}</span></p>
    </div>
    <button @click="returnMenu" class="return">退出</button>
    <div class="bus-legend">
      <div>
        <span class="icon-stop small red">
          <span class="icon-stop-inside"></span>
        </span>
        <span>站点</span>
      </div>
      <div>
        <span class="icon-stop red">
          <span class="icon-stop-inside"></span>
        </span>
        <span>top10站点</span>
        </div>
      <div>
        <span class="icon-stop blue">
          <span class="icon-stop-inside"></span>
        </span>
        <span>bottom10站点</span>
        </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";
  .stopsContainer {
    color: $font-color-normal;
    position: absolute;
    top: 90px;
    left: 20px;
    height: 575px;
    width: 305px;
    padding-left: 50px;
    padding-top: 22px;
    @include borderBlur;

    h1 {
      font-size: $font-title;
      margin-bottom: 24px;
      margin-top: 0;
    }

    p {
      font-size: $font-big;
      margin-bottom: 30px;

      span:nth-child(1) {
        display: inline-block;
        width: 10px;
        margin-right: 100px;
      }
    }

    .icon {
      position: absolute;
      z-index: 10;
      width: 14px;
      height: 14px;
      &.top-left-icon {
        top: -2px;
        left: -2px;
        background: url("../../../static/images/index/top-left.png") no-repeat left top;
      }
      &.top-right-icon {
        top: -2px;
        right: -2px;
        background: url("../../../static/images/index/top-right.png") no-repeat right top;
      }
      &.bottom-left-icon {
        bottom: -2px;
        left: -2px;
        background: url("../../../static/images/index/left-bottom.png") no-repeat left bottom;
      }
      &.bottom-right-icon {
        bottom: -2px;
        right: -2px;
        background: url("../../../static/images/index/right-bottom.png") no-repeat right bottom;
      }
    }
  }

  .return {
    width: 65px;
    height: 65px;
    position: absolute;
    top: 90px;
    right: 20px;
    font-size: $font-big;
    color: #fff;
    pointer-events: auto;     //浮在地图上，其父元素禁用了鼠标事件，这里解除
    cursor: pointer;
    @include borderBlur;
  }

  .bus-legend {
    width: 200px;
    height: 180px;
    position: absolute;
    bottom: 10px;
    right: 10px;

    div {
      margin-bottom: 10px;
      height: 50px;
      line-height: 50px;
    }

    span:nth-child(2) {
      color: $font-color-normal;
      font-size: $font-mid;
      margin-left: 70px;
    }

    .icon-stop {
      display: inline-block;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      position: absolute;
      left: 10px;

      .icon-stop-inside {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        position: absolute;
        left: 9px;
        top: 9px;
      }

      &.small {
        width: 22px;
        height: 22px;
        left: 24px;
        top: 14px;

        .icon-stop-inside {
          width: 14px;
          height: 14px;
          left: 4px;
          top: 4px;
        }
      }

      &.red {
        background-color: rgba(255, 71, 71, 0.25);

        .icon-stop-inside {
          background-color: rgb(255, 71, 71);
        }
      }

      &.blue {
        background-color: rgba(73, 161, 254, 0.25);

        .icon-stop-inside {
          background-color: rgb(73, 161, 254);
        }
      }

    }
  }
</style>

<script>
  import {mapGetters, mapActions} from 'vuex';
  import eventBus from '../../util/event-bus'
  export default {
    name: 'od-bus',

    data () {
      return {
        stops: []
      }
    },

    mounted: function () {
      this.getOdBus();
    },

    beforeDestroy: function () {
      eventBus.$emit('destroyOdBusLayer');
    },

    methods: {
      ...mapActions({
        getOdBus: "od/getOdBus"
      }),
      returnMenu: function () {
        this.$emit("changestate", "home");
      }
    },

    computed: {
      ...mapGetters({
        odBus: "od/odBus"
      }),
      stopsChange() {
        return this.odBus.stops;
      },
      linesChange() {
        return this.odBus.lines;
      }
    },
    
    watch: {
      linesChange: function(newVal, oldVal) {
        eventBus.$emit('addOdBusLinesLayer', newVal);
      },
      stopsChange: function(newVal, oldVal) {
        this.stops = [];
        eventBus.$emit('addOdBusStopsLayer', newVal);
        newVal.forEach(stop => {
          if (stop.rank <= 10 && this.stops.length <= 10) this.stops.push(stop);
        });
      }
    }
  }
</script>
